<template>
    <div class="voice-to-word">
        <header-a type="voice-to-word"/>
        <div class="w1">

            <div class="w11 text-center">语音转文字</div>

            <div class="w12 mar-center">
                <span @click="toInstructions">使用说明？</span>
            </div>

            <div class="w13 container-align mar-center">
                <div class="w14">添加语音</div>
                <div class="w15 container-align">
                    <div></div>
                    <div @click="toHistory">历史识别</div>
                </div>
            </div>

            <div class="w16 container-align mar-center">
                <div class="w17">

                    <div class="w19">

                        <div class="w26 container-align" v-for="(i, index) in list" :key="i.id">
                            <div class="w27">文字{{index + 1}} :</div>
                            <div class="w28">
                                {{i.name}}
                                <img src="../assets/img/32.png" @click="delWord(index)"/>
                            </div>
                            <div class="w29">{{i.num}}s</div>
                        </div>

                    </div>

                    <div class="w20 container-align">
                        <div class="container-align">
                            <div class="w22">累计消耗：{{integral}}积分</div>
                            <div class="w23" @click="toIntegralRule">（积分规则？）</div>
                        </div>
                        <!--<div class="w21">3/50</div>-->
                    </div>

                    <!--<div class="w24 container">
                      <textarea name="text" id="text" cols="30" rows="10" placeholder="请输入文本.."></textarea>
                      <img class="w45" src="../assets/img/31.png"/>
                    </div>-->

                    <form class="w30" action="http://house.togames.top/api/pc/audioIntegral" method="post" target="_self">
                        <img class="w25" src="../assets/img/34.png"/>
                        <input type="file"  @change="fileChange" name="file">
                    </form>

                </div>
                <!--<div class="w18">

                  <div class="w31 container-align text-center">
                    <div class="w32" v-for="i in types" :key="i.id">{{i.name}}</div>
                  </div>

                  <div class="w33">

                    <div>
                      <div class="w35 container-align" v-for="i in d" :key="i.id">
                        <img class="w25" src="../assets/img/29.png"/>
                        <div class="">{{i.name}}</div>
                      </div>
                    </div>

                  </div>

                </div>-->
            </div>

            <div class="w34 mar-center container-align">
                <div class="w36 container-align">

                    <!--<div class="container-align">
                      <div class="w37">音量</div>
                      <div class="w38">
                        <div class="w39" style="left: 50%" @click="tapPointer"></div>
                      </div>
                      <div class="w37">5</div>
                    </div>

                    <div class="container-align">
                      <div class="w37">音调</div>
                      <div class="w38">
                        <div class="w39" style="left: 50%"></div>
                      </div>
                      <div class="w37">5</div>
                    </div>

                    <div class="container-align">
                      <div class="w40">语音格式</div>
                      <div :class="['w41', format === 0 && 'check']" @click="selFormat(0)"></div>
                      <div class="w40" @click="selFormat(0)">MP3</div>
                      <div :class="['w41', format === 1 && 'check']" @click="selFormat(1)"></div>
                      <div class="w40" @click="selFormat(1)">WAV</div>
                    </div>-->

                </div>
                <div class="w37 container-align">

                    <div class="w42" @click="selAgreement">
                        <img v-if="agreement" src="../assets/img/25.png"/>
                    </div>
                    <div class="w43" @click="toAgree">免责协议</div>
                    <div class="w44 text-center" @click="audioTransform">立即合成</div>
                </div>
            </div>

        </div>
        <cooperative/>
        <bottom/>
        <customer-service/>
    </div>
</template>

<script>
import HeaderA from "@/components/child/Header";
import Cooperative from "@/components/Cooperative";
import CustomerService from "@/components/CustomerService";
import Bottom from "@/components/Bottom";
import axios from 'axios'
import api from '../utils/api'

export default {
    name: "VoiceToWord",
    components: { HeaderA, Cooperative, Bottom, CustomerService },
    data () {
        return {
            types: [
                {
                    id: 1,
                    name: '全部'
                },
                {
                    id: 2,
                    name: '客服'
                },
                {
                    id: 3,
                    name: '男声'
                },
                {
                    id: 4,
                    name: '女声'
                },
                {
                    id: 5,
                    name: '童声'
                }
            ],
            d: [
                {
                    id: 1,
                    name: '标准男声'
                },
                {
                    id: 2,
                    name: '标准女声'
                },
                {
                    id: 3,
                    name: '标准样音员一'
                },
                {
                    id: 4,
                    name: '标准样音员二'
                },
                {
                    id: 5,
                    name: '标准样音员三'
                },
                {
                    id: 6,
                    name: '标准样音员四'
                },
                {
                    id: 7,
                    name: '标准样音员五'
                },
                {
                    id: 8,
                    name: '标准样音员五'
                }
            ],
            list: [],
            format: 0,
            agreement: false,
            requesting: false,
            integral: 0
        }
    },
    methods: {
        toIntegralRule () {
            this.$router.push('/integral-rule/0')
        },
        toAgree () {
            this.$router.push('/agreement')
        },
        toInstructions () {
            this.$router.push('/instructions/1')
        },
        toHistory () {
            if (!this.$root.wxId) {
                this.$router.push('/login');
                return;
            }
            this.$router.push('/history/1')
        },
        delWord (index) {
            this.list.splice(index, 1);
            this.integral = 0;
            this.list.forEach(v => {
                this.integral += v.integral;
            });
        },
        async audioTransform () {
            if (!this.$root.wxId) {
              this.$router.push('/login')
              return
            }
            if (!this.agreement) {
                alert('请勾选免责协议！');
                return
            }
            if (this.list.length === 0) {
                alert('请上传需要转换的文件！');
                return
            }

            if (this.requesting) return;
            this.requesting = true;
            let res = await this.$http.post('audioTransform', {
                "wxId": this.$root.wxId,
                "fileNames":[
                    ...this.list.map(v => v.name)
                ]
            });
            this.$emit('update');
            if (res.data.result === 1){
                this.toHistory();
            }
            this.requesting = false;
            alert(res.data.message);
            console.log(res)
        },
        fileChange (e) {
            console.log(e.target)
            this.$nextTick(() => {
                let formData = new FormData();
                formData.append("file", e.target.files[0]);
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };
                axios.post(api.audioIntegral , formData, config).then((e) => {
                    const m = e.data.data
                    this.list.push({
                        id: new Date().getTime() + this.list.length,
                        name: m.fileName,
                        num: m.s,
                        integral: Number(m.integral)
                    });
                    console.log(e)
                    this.integral = 0;
                    this.list.forEach(v => {
                        this.integral += v.integral;
                    });
                    alert(e.data.message);
                });
            })
        },
        selFormat (t) {
            this.format = t;
        },
        tapPointer (e) {
            console.log(e)
        },
        selAgreement () {
            this.agreement = !this.agreement
        }
    }
}
</script>

<style scoped lang="scss">
.voice-to-word {
    .w1 {
        padding-top: 96px;
        padding-bottom: 96px;
        .w34{
            height: 88px;
            width: 1200px;
            background-color: #26C6AB;
            padding-left: 22px;
            padding-right: 37px;
            justify-content: space-between;
            .w36{

            }
            .w40{
                margin-right: 13px;
                color: #FFFFFF;
                cursor: pointer;
            }
            .w41.check{
                position: relative;
                &:after{
                    position: absolute;
                    content: '';
                    width: 7px;
                    height: 7px;
                    top: 3px;
                    left: 3px;
                    background-color: #26C6AB;
                    border-radius: 50%;
                }
            }
            .w41{
                width: 13px;
                height: 13px;
                background-color: #FFFFFF;
                border-radius: 50%;
                margin-right: 2px;
                cursor: pointer;
            }
            .w38{
                width: 112px;
                height: 6px;
                background-color: rgba(255, 255, 255, 0.4);
                border-radius: 3px;
                margin-right: 10px;
                margin-left: 10px;
                position: relative;
                cursor: pointer;
                .w39{
                    width: 13px;
                    height: 13px;
                    background-color: rgba(255, 255, 255, 1);
                    border-radius: 50%;
                    position: absolute;
                    top: -3px;
                }
            }
            .w37{
                font-size: 16px;
                color: #FFFFFF;
                .w42{
                    width: 16px;
                    height: 16px;
                    background-color: #FFFFFF;
                    margin-right: 4px;
                    cursor: pointer;
                    img{
                        width: 16px;
                        height: 16px;
                        position: relative;
                        top: -2px
                    }
                }
                .w43{
                    margin-right: 31px;
                    color: #FFFFFF;
                    cursor: pointer;
                }
                .w44{
                    width: 122px;
                    height: 46px;
                    line-height: 46px;
                    background: #FFFFFF;
                    border-radius: 6px;
                    font-size: 16px;
                    color: #26C6AB;
                    cursor: pointer;
                }
            }
            .w36 > div{
                margin-right: 70px;
            }
        }
        .w16{
            width: 1200px;
            background-color: #EFEFEF;
            height: 605px;
            .w17{
                flex-grow: 1;
                padding-left: 22px;
                padding-right: 18px;
                .w30{
                    position: relative;
                    input{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        opacity: 0;
                    }
                }
                .w24{
                    height: 100px;
                    background-color: #FFFFFF;
                    padding: 12px;
                    margin-top: 10px;
                    textarea{
                        flex-grow: 1;
                        border: none;
                        resize: none;
                        outline: none;
                    }
                    textarea::-webkit-input-placeholder {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.2);
                    }
                    textarea:-moz-placeholder {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.2);
                    }
                    textarea::-moz-placeholder {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.2);
                    }
                    textarea:-ms-input-placeholder {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.2);
                    }
                    .w45{
                        width: 46px;
                        height: 26px;
                        cursor: pointer;
                    }
                }
                .w25{
                    width: 100%;
                }
                .w20{
                    justify-content: space-between;
                    margin-bottom: 10px;
                    .w22{
                        line-height: 20px;
                        color: #000000;
                    }
                    .w23{
                        cursor: pointer;
                    }
                    .w23,.w21{
                        line-height: 20px;
                        color: rgba(0,0,0,0.6);
                        opacity: 0.6;
                    }
                }
                .w19{
                    height: 400px;
                    padding-top: 35px;
                    overflow-y: auto;
                    .w26{
                        margin-bottom: 12px;
                        .w27{
                            height: 22px;
                            font-size: 16px;
                            line-height: 22px;
                            color: #000000;
                        }
                        .w28{
                            line-height: 50px;
                            height: 50px;
                            background-color: #FFFFFF;
                            border-radius: 6px;
                            padding-left: 25px;
                            font-size: 16px;
                            color: rgba(0, 0, 0, 0.6);
                            opacity: 0.61;
                            padding-right: 25px;
                            margin-right: 10px;
                            position: relative;
                            img{
                                width: 12px;
                                height: 12px;
                                position: absolute;
                                top: 1px;
                                right: 1px;
                                cursor: pointer;
                            }
                        }
                        .w29{
                            height: 20px;
                            line-height: 20px;
                            color: rgba(0, 0, 0, 0.6);
                            align-self: flex-end;
                        }
                    }
                }
            }
            .w18{
                width: 41.5%;
                align-self: flex-start;
                padding-right: 8px;
                .w33{
                    height: 545px;
                    background-color: #FFFFFF;
                    padding: 13px 36px 0 36px;
                    overflow-y: auto;
                    >div {
                        flex-wrap: wrap;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;

                        .w35 {
                            width: calc(50% - 6px);
                            height: 72px;
                            background-color: #EFEFEF;
                            border-radius: 6px;
                            justify-content: center;
                            font-size: 16px;
                            color: #000000;
                            margin-bottom: 28px;

                            img {
                                width: 48px;
                                height: 48px;
                                border-radius: 50%;
                                margin-right: 16px;
                            }
                        }
                    }
                }
                .w31{
                    height: 60px;
                    background-color: #EFEFEF;
                    overflow-y: auto;
                    .w32{
                        width: 64px;
                        font-size: 16px;
                        color: #000000;
                    }
                }
            }
        }
        .w15{
            justify-content: space-between;
            width: 41.5%;
            cursor: pointer;
        }
        .w14{
            flex-grow: 1;
        }
        .w13{
            height: 60px;
            background-color: #26C6AB;
            padding-left: 22px;
            padding-right: 35px;
            width: 1200px;
            font-size: 16px;
            color: #FFFFFF;
        }
        .w12{
            width: 1200px;
            text-align: right;
            margin-bottom: 10px;
            >span{
                cursor: pointer;
                height: 22px;
                font-size: 16px;
                line-height: 22px;
                color: rgba(0,0,0,0.4);
            }
        }
        .w11{
            height: 42px;
            font-size: 30px;
            line-height: 42px;
            color: #000000;
        }
    }
}
</style>